// @vitest-environment jsdom // // `/docs/[...slug]` catch-all — its `getStaticPaths` export (enumerates the // pre-rendered doc slugs) and the localized page render for a matched vs. // unknown slug. The page reads the captured slug via `useParams` (mocked to // drive the slug) and its per-locale prose via @voltro/i18n (mocked to resolve // against the real catalogs for a controllable "current locale"). import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import { act, createElement, type ReactNode } from 'react' import { createRoot, type Root } from 'react-dom/client' import en from '../../../locales/en' import de from '../../../locales/de' const params = vi.fn<() => Record>() vi.mock('@voltro/web', () => ({ useParams: () => params() })) const catalogs: Record> = { en, de } let currentLocale = 'en' const fill = (msg: string, values?: Record): string => values ? msg.replace(/\{(\w+)\}/g, (_, k: string) => String(values[k] ?? `{${k}}`)) : msg vi.mock('@voltro/i18n', () => ({ // The locale catalogs call these at module top-level; identity mirrors the // real (compile-time-only) implementations so importing them doesn't throw. defineCatalog: (c: T): T => c, defineLocale: () => (c: T): T => c, useTFn: () => (id: string, values?: Record) => fill(catalogs[currentLocale]?.[id] ?? id, values), T: ({ id, values }: { id: string; values?: Record }) => fill(catalogs[currentLocale]?.[id] ?? id, values), })) const { default: DocPage, getStaticPaths, meta, renderMode, interactive } = await import('./page') ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true let container: HTMLDivElement let root: Root const render = (node: ReactNode): void => { container = document.createElement('div') document.body.appendChild(container) act(() => { root = createRoot(container) root.render(node) }) } beforeEach(() => params.mockReset()) afterEach(() => { currentLocale = 'en' if (root) act(() => root.unmount()) container?.remove() document.body.innerHTML = '' }) describe('docs [...slug] — config + getStaticPaths', () => { test('is a static page with no client JS', () => { expect(renderMode).toBe('static') expect(interactive).toBe('none') }) test('enumerates every doc slug as a single `/`-joined string', async () => { const paths = await getStaticPaths() expect(paths.map((p) => p.params.slug)).toEqual([ 'intro/getting-started', 'guides/first-page', ]) }) }) describe('docs [...slug] — localized meta', () => { test('reads the per-doc title from the catalog, per locale', () => { expect(meta({ locale: 'en', params: { slug: 'guides/first-page' } }).title).toBe('Your first page') expect(meta({ locale: 'de', params: { slug: 'guides/first-page' } }).title).toBe('Deine erste Seite') }) test('falls back to the not-found title for an unknown slug', () => { expect(meta({ locale: 'en', params: { slug: 'does/not-exist' } }).title).toBe('Not found') }) }) describe('docs [...slug] — localized render', () => { test('renders the matched doc title + body (English) for a known slug', () => { currentLocale = 'en' params.mockReturnValue({ slug: 'guides/first-page' }) render(createElement(DocPage)) expect(container.querySelector('h1')?.textContent).toBe('Your first page') expect(container.textContent).toContain('Drop a') }) test('renders the matched doc title + body (German) for a known slug', () => { currentLocale = 'de' params.mockReturnValue({ slug: 'guides/first-page' }) render(createElement(DocPage)) expect(container.querySelector('h1')?.textContent).toBe('Deine erste Seite') expect(container.textContent).toContain('Lege eine') }) test('renders the localized not-found fallback for an unknown slug', () => { currentLocale = 'en' params.mockReturnValue({ slug: 'does/not-exist' }) render(createElement(DocPage)) expect(container.querySelector('h1')?.textContent).toBe('Not found') expect(container.textContent).toContain('does/not-exist') }) })